$che-simple-selector-color = $label-info-color

.che-simple-selector
  outline none
  height 90px
  width 260px
  border-color $form-element-border-color
  background-color $background-color
  border-width 2px
  border-style solid
  che-border-radius(2px)
  -webkit-box-shadow 0 1px 1px rgba(0, 0, 0, 0.05)
  box-shadow 0 1px 1px rgba(0, 0, 0, 0.05)
  padding-top 16px
  cursor pointer
  margin-bottom 20px
  margin-right 20px

  &:hover
    background-color $che-simple-selector-color
    color $background-color

  &:focus
    outline none

  .title
    position relative
    border 1px solid $che-simple-selector-color
    border-right none
    border-left none
    line-height 22px

    &:before
      position absolute
      border-top 24px solid transparent
      border-right 24px solid $che-simple-selector-color
      content ""
      left -24px
      bottom -1px

    &:after
      position absolute
      border-top 23px solid transparent
      border-right 23px solid $background-color
      content ""
      left -22px
      bottom 0

    div
      text-overflow ellipsis
      white-space nowrap
      overflow hidden

  &:hover .title
    border-color $background-color

    &:before
      border-right-color $background-color

  &:hover .title:after
    border-right-color $che-simple-selector-color

  .selector-icon
    padding 0
    width 55px
    height 24px
    font-size 24px
    line-height 24px
    text-align center
    margin-right 22px
    filter grayscale(100%)

    &:before
      color $menu-bg-color

    img
      display inline
      height 24px
      max-width 36px
      position relative
      bottom 4px

  .cheico-type-blank img
    display none

  .title
    font-size 12px
    line-height 22px
    text-align center
    text-transform uppercase

  .description
    font-size 12px
    padding 5px 10px
    color $label-primary-color

.che-simple-selector-active
  border-color $primary-color
  color $primary-color

  &:hover
    background-color $background-color

  .title,
  &:hover .title
    background-color $primary-color
    color $background-color
    border-color $primary-color
    font-weight bold

  .title:before,
  &:hover .title:before
    border-right-color $primary-color

  .title:after,
  &:hover .title:after
    border-right-color $primary-color

  .selector-icon,
  &:hover .selector-icon
    filter none
